<template>
  <div class="ad-container">
    <h1 style="text-align: center; margin: 20px 0">精选广告推荐</h1>
    
    <div class="ad-list">
      <el-card 
        v-for="ad in activeAds" 
        :key="ad.id" 
        class="ad-item"
        shadow="hover"
      >
        <div class="ad-content">
          <el-image 
            :src="ad.pic" 
            fit="cover" 
            class="ad-image"
            :preview-src-list="[ad.pic]"
          />
          
          <div class="ad-info">
            <h3>{{ ad.title }}</h3>
            <p class="ad-type">{{ ad.categoryName }}</p>
            <el-button 
              type="primary" 
              @click="visitLink(ad.url)"
              class="visit-btn"
            >
              立即查看
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getByStatus } from '../../api/frontdesk/index.js'

const activeAds = ref([])

const loadAds = async () => {
  try {
    const res = await getByStatus()
    activeAds.value = res
  } catch (error) {
    console.error('加载广告失败:', error)
  }
}

const visitLink = (url) => {
  window.open(url, '_blank')
}

onMounted(() => {
  loadAds()
})
</script>

<style scoped>
.ad-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.ad-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.ad-item {
  transition: transform 0.3s;
}

.ad-item:hover {
  transform: translateY(-5px);
}

.ad-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ad-image {
  width: 100%;
  height: 180px;
  border-radius: 4px;
}

.ad-info {
  padding: 15px;
  flex-grow: 1;
}

.ad-info h3 {
  margin: 10px 0;
  color: #333;
}

.ad-type {
  color: #666;
  margin-bottom: 15px;
}

.visit-btn {
  width: 100%;
}
</style>